<template>
	<div class="cotainer">
		<bs-input type="textarea" @focus="event = 'focused'" @blur="event = 'blured'" :value.sync="advice" :placeholder="'来吐槽一下吧……'"></bs-input>
		<bs-input required label="留下联系方式" type="text" :match="advice" :value.sync="contact" :placeholder="'手机号 / QQ / 邮箱'"></bs-input>
		<sure-button :text="'提交'" @click="submit()"></sure-button>
		<!-- 提示信息 -->
		<alert :show.sync="adviceAlert" placement="top" duration="3000" type="danger" width="94%" dismissable>
			<span class="icon-info-circled alert-icon-float-left"></span>
			<strong>错误</strong>
			<p>建议内容不能为空</p>
		</alert>
		<alert :show.sync="contactAlert" placement="top" duration="3000" type="danger" width="94%" dismissable>
			<span class="icon-info-circled alert-icon-float-left"></span>
			<strong>错误</strong>
			<p>联系方式格式不正确</p>
		</alert>
		<alert :show.sync="submitAlert" placement="top" duration="3000" type="success" width="94%" dismissable>
			<span class="icon-info-circled alert-icon-float-left"></span>
			<strong>提示</strong>
			<p>建议已提交</p>
		</alert>
	</div>
</template>
<script>
	import Alert from 'vue-strap/src/alert'
	import BsInput from 'vue-strap/src/input'
	import SureButton from './../public/SureButton'

	export default {
		components: {
			Alert,
			BsInput,
			SureButton
		},
		data: function () {
			return {
				advice: '123',
				contact: '',
				type: 'danger',
				adviceAlert: false,
				contactAlert: false,
				submitAlert: false
			}
		},
		methods: {
			submit: function () {
				if (!this.advice.trim()) {
					console.log(this.advice)
					this.adviceAlert = true
					return
				}
				if (!this.contactState) {
					this.contactAlert = true
					return
				}
				this.submitAlert = true
			}
		},
		computed: {
			contactState: function () {
				let contact = this.contact
				let tel = /^(139|158)(\d){8}/
				let email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.com|.cn)$/
				let qq = /\d{7}/
				if (!contact) return false
				if (tel.test(contact) || email.test(contact) || qq.test(contact)) return contact
				return false
			}
		}
	}
</script>
<style scoped>
	.cotainer {
		padding: 20px;
	}
</style>